import React, { Component } from 'react'
import { NavBar,SearchBar} from 'antd-mobile';
import {withRouter} from 'react-router-dom'
import './SearchContent.scss'


import store from '../../store'
import {getSearch} from '../../store/actionCreator'
import {connect} from 'react-redux'

 class SearchContent extends Component {
     state={
         inputVal:'',
         searchiList:[]
     }
     getProductList=()=>{
        store.dispatch(getSearch(this.state.inputVal,(id)=>{
            this.setState({
                searchiList:id
            })
        }))
    }
    handClick=(e) => {
        let goods_id=e.target.getAttribute("data-id")
        this.props.history.push('/detail/'+goods_id)
    }
    render() {
        return (
            <div className='yg-searchContent'>
                {/* 头部导航开始 */}
               <div className='searchContent-title'>
                    <NavBar 
                    className='searchContent-top'
                    icon={<i className='iconfont icon-fanhui1'></i>}
                    onLeftClick={() => window.history.go(-1)}
                    >搜索中心</NavBar>
               </div>
               {/* 头部导航结束 */}
               {/* 输入框开始 */}
               <div className='yg-searchContent-input'>
                    <SearchBar
                    className='searchContent-input'
                    value={this.state.inputVal}
                    cancelText='搜索'
                    onCancel={() => this.getProductList()}
                    placeholder="Search"
                    showCancelButton
                    onChange={(value) => {
                        this.setState({ inputVal:value });
                      }}
                />
               </div>
               {/* 输入框结束 */}
               {/* 商品内容开始 */}
               <div className='yg-searchContent-product' onClick={this.handClick}>
                {
                    this.state.searchiList.map((v,i)=>{
                        return (
                            <div className='product-list' key={v.goods_id}>
                                <div className='product-list-img'>
                                    <img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1924128560,145776462&fm=26&gp=0.jpg' alt='' data-id={v.goods_id}/>
                                </div>
                                <div className='product-list-title' data-id={v.goods_id}>{v.goods_name}</div>
                            </div>
                        )
                    })  
                }
               </div>
               {/* 商品内容结束 */}
            </div>
        )
    }
}

// const mapStateToProps = (state) => {
//     return {
//         searchiList:state.SearchContentReducer.searchiList,  
//     }
// }

export default connect(null, null)(withRouter(SearchContent));